<template>
  <div class="body">
    <!--    登录界面-->
    <h1 style="text-align: left">登录</h1>
    <h3 style="text-align: right; color: #454646; margin: 0 0 5%;">
      没有帐号？ <router-link style="color: #5470C6" to="/signup">点此注册</router-link>
    </h3>
    <div class="main">
      <a-form
          :model="formState"
          v-bind="layout"
          name="nest-messages"
          :validate-messages="validateMessages"
          @finish="onFinish"
          class="form1"
      >
        <a-form-item :name="['user', 'USER_ACCOUNT']" label="Account/Email" :rules="[{ required: true }]">
          <a-input v-model:value="formState.user.USER_ACCOUNT" />
        </a-form-item>
        <a-form-item v-if="formState.user.USER_ACCOUNT.split('@').length == 2" :name="['user', 'CHECK']" label="Check">
          <a-input  style="width: 50%; background-color: #2D333B" v-model:value="formState.user.CHECK" />
          <a-button style="margin-left: 5px; height: 31px" type="primary" :disabled="disable" :class="{ codeGeting:isGeting }" @click="sendEmail(formState.user.USER_ACCOUNT);">{{getCode}}</a-button>
        </a-form-item>
        <a-form-item v-else  :name="['user', 'USER_PASSWORD']" label="Password" :rules="[{min: 8, max: 20 }]">
          <a-input-password  v-model:value="formState.user.USER_PASSWORD" />
        </a-form-item>
        <a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 8 }">
          <a-button class="button" type="primary" html-type="submit">Submit</a-button>
        </a-form-item>
      </a-form>
    </div>
    <router-link style="color: #5470C6" to="/repwd">已有账号。忘记密码？</router-link>
  </div>
</template>

<script setup>
import {onBeforeMount, reactive, ref} from "vue";
import {message} from "ant-design-vue";
onBeforeMount(() => {
  const user = localStorage.getItem('user')
  if(user){
    const information = user.split(" ")
    const req = information[4]
    console.log(req)
  }
})
const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not a valid email!',
  },
  string:{
    range:'${label} must be between ${min} and ${max}!'
  }
};
const formState = reactive({
  //登录
  user: {
    USER_ACCOUNT: '',
    USER_PASSWORD: '',
    CHECK:'',
  },
});
/*
按钮倒计时功能
 */
const disable = ref(false)
const getCode = ref("获取验证码")
const isGeting = ref(false)
const count = ref(60)
const sendEmail = (email) => {
  if(!email){
    message.error('email不能为空哦')
  }
  if(email && email.split("@").length == 2){
    console.log(true)
    const countDown = setInterval(() => {
      if (count.value < 1) {
        isGeting.value = false;
        disable.value = false;
        getCode.value = '获取验证码';
        count.value = 60;
        clearInterval(countDown);
      } else {
        isGeting.value = true;
        disable.value = true;
        getCode.value = count.value-- + 's后重发';
      }
    }, 1000);
  }
}

/*

 */

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

//登录
const onFinish = () => {
  console.log('login');
  const account = formState.user.USER_ACCOUNT
  if(account.split('@').length == 2){
    const email = {
      "EMAIL":'',
      "CHECK":0
    }
    email.EMAIL = formState.user.USER_ACCOUNT;
    email.CHECK = formState.user.CHECK;
  }else{
    const user = {
      USER_ACCOUNT: '',
      USER_PASSWORD: '',
    }
    user.USER_ACCOUNT = formState.user.USER_ACCOUNT
    user.USER_PASSWORD = formState.user.USER_PASSWORD
  }
};
</script>

<style scoped>
.body {
  width: 100%;
}
.main {
  width: 100%;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.5s ease, opacity 0.5s ease; /* 添加过渡效果 */
}
.form1 {
  position: relative;
  width: 100%;
}
.button {
  margin-top: 20px;
  margin-left: 40px;
}
.codeGeting{
  background: #cdcdcd;
  border-color: #cdcdcd;
}
</style>
